<template>
	<view class="cu-card article">
		<view class="shadow cu-item" style="padding-bottom:0;margin:0">
			<view class="content radius" style="padding:16upx 32upx 20upx 32upx " :class="'bg-'+message.color">
				<view class="desc">
					<view class="text-white" style="height:4.0em;">
						<view class="flex-wrap flex">
							<view class="basis-lg">
								<!-- 套餐名称 -->
								<view class="line-limit-one text-white text-xl" style="line-height: 60upx;margin-bottom:10upx">
									<text v-if="channelAdd">[{{channelAdd}}{{$t('JLink.order.list.message.channel')}}]</text>
									{{message.goodsName}}
								</view>
								<!-- 到期时间 -->
								<view class="line-limit-one text-xs">
									{{$t('JLink.publicText.expirationTime')}}：{{message.expirationTime}}
								</view>
							</view>
							<view class="basis-sm" style="text-align: right;padding-top:20upx">
								<view class="text-right" >
									<view class="text-df text-white margin-right">
										<text v-if="message.color==='primary'" >{{$t('JLink.publicText.used')}}</text><!--  使用中 -->
										<text v-else-if="message.color==='orange'" >{{$t('JLink.publicText.expiring')}}</text><!-- 即将到期 -->
										<text v-else-if="message.color==='reds'">{{$t('JLink.publicText.expired')}}</text><!-- 已过期 -->
									</view>
									<!-- 点击续费 -->
									<button v-if="message.color==='orange' || message.color==='reds'" 
										class="cu-btn round text-xs text-white" 
										style="height:48upx;margin-top:10upx;background-color:rgba(154, 98, 45,0.46);"
										@tap="handleRenewal">
										{{$t('JLink.publicText.renewal')}}
									</button>
								</view>	
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
 	props: {
		message: {
		    type: Object,
		    default: () => {
				return {
				  goodsName: "",
				  expirationTime: "",
				  color: ""
				};
			},
		},
		urlParams:{
			type:Object,
			  default:()=>{
				return{}
			}
		}
	},
	data() {
	    return {
       
		}
	},
	computed:{
		channelAdd(){
		  const { channel } = this.urlParams;
		  if(channel&&channel!='-1'){
			return Number(channel)+1
		  }else{
			return 0
		  }
		}
	},
	methods: {
		handleRenewal (){
			this.$emit('renewalClick',this.message)
		}
    }
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
